<template>
  <div class="trend-line">
    <h3>{{ titletext }}</h3>
    <div class="echartsbox">
      <div :id="type==1?'trendline':'trendline2'" style="width:100%;height:100%"></div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  props: {
    titletext: String,
    type: Number,
    echartsdata:Object
  },
  data() {
    return {
      dateList: Object.keys(this.echartsdata),
      valueList: Object.values(this.echartsdata)
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
     
      let myChart =this.type==1? this.echarts.init(document.getElementById("trendline")):this.echarts.init(document.getElementById("trendline2"));
      
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left:'15%',
          right:25,
          bottom: 40,
          top: 20
        },
        splitLine: {
          lineStyle: {
            opacity: 0.3,
          },
        },
        xAxis: [
          {
            data: this.dateList,
            boundaryGap:false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight: "bold",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight: "bold",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            // showSymbol: false,
            symbol: (value, params) => {
              if (+value === Math.max(...this.valueList)) {
                return "emptyCircle";
              }
              return "none";
            },
            symbolSize: 10,
            data: this.valueList,
            smooth: true,
            // markPoint: {
              
            //   symbol:this.type==1? "path://M35.9805882,0 C41.9698404,0 46.8430888,4.77678698 46.9962861,10.7302138 L47,11.019186 C47,17.1049144 42.059009,22.0383721 35.9805882,22.0383721 L29.371,22.038 L23.5086435,28 L17.646,22.038 L11.0194118,22.0383721 C4.93355872,22.0383721 0,17.1062525 0,11.019186 C0,4.93345763 4.94099103,0 11.0194118,0 L35.9805882,0 Z":"path://M35.9805882,0 C41.9698404,0 46.8430888,4.77678698 46.9962861,10.7302138 L47,11.019186 C47,17.1049144 42.059009,22.0383721 35.9805882,22.0383721 L29.371,22.038 L23.5086435,28 L17.646,22.038 L11.0194118,22.0383721 C4.93355872,22.0383721 0,17.1062525 0,11.019186 C0,4.93345763 4.94099103,0 11.0194118,0 L35.9805882,0 Z",  
            //   symbolSize: [47,28],
            //   // symbolOffset:[0,'50%'],
            //   symbolKeepAspect: true, // 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比。
            //   data: [{ type: "max", name: "最大值" }],
            //   label:{
            //     offset:[0,0],
            //     color:'#fff',
            //     fontSize:16,
            //     fontWeight:'700'
            //   }
            // },
            lineStyle: {
              width: 3,
              color: {
                colorStops:this.type==1? [
                  {
                    offset: 0,
                    color: "rgba(116, 255, 185,.1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(116, 255, 185,1)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(116, 255, 185,.1)", // 100% 处的颜色
                  },
                ]:[
                  {
                    offset: 0,
                    color: "rgba(116, 232, 255,.1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(116, 232, 255,1)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(116, 232, 255,.1)", // 100% 处的颜色
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                color: this.type==1?"#74ffb9":"#74E8FF",
              },
            },
            areaStyle: {
              color:this.type==1? new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(116, 255, 185,.5)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 255, 185,0)",
                },
              ]):new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(116, 232, 255,.5)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 232, 255,0)",
                },
              ]),
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    update(data) {
      const dateList = Object.keys(data)
      const valueList = Object.values(data)
      let myChart =this.type==1? this.echarts.init(document.getElementById("trendline")):this.echarts.init(document.getElementById("trendline2"));
      
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left:'15%',
          right:25,
          bottom: 40,
          top: 20
        },
        splitLine: {
          lineStyle: {
            opacity: 0.3,
          },
        },
        xAxis: [
          {
            data: dateList,
            boundaryGap:false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight: "bold",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "#a1a1a4", //更改坐标轴文字颜色
                fontSize: 12, //更改坐标轴文字大小
                fontWeight: "bold",
              },
            },
          },
        ],
        series: [
          {
            type: "line",
            // showSymbol: false,
            symbol: (value, params) => {
              if (+value === Math.max(...valueList)) {
                return "emptyCircle";
              }
              return "none";
            },
            symbolSize: 10,
            data: valueList,
            smooth: true,
            // markPoint: {
              
            //   symbol:this.type==1? "path://M35.9805882,0 C41.9698404,0 46.8430888,4.77678698 46.9962861,10.7302138 L47,11.019186 C47,17.1049144 42.059009,22.0383721 35.9805882,22.0383721 L29.371,22.038 L23.5086435,28 L17.646,22.038 L11.0194118,22.0383721 C4.93355872,22.0383721 0,17.1062525 0,11.019186 C0,4.93345763 4.94099103,0 11.0194118,0 L35.9805882,0 Z":"path://M35.9805882,0 C41.9698404,0 46.8430888,4.77678698 46.9962861,10.7302138 L47,11.019186 C47,17.1049144 42.059009,22.0383721 35.9805882,22.0383721 L29.371,22.038 L23.5086435,28 L17.646,22.038 L11.0194118,22.0383721 C4.93355872,22.0383721 0,17.1062525 0,11.019186 C0,4.93345763 4.94099103,0 11.0194118,0 L35.9805882,0 Z",  
            //   symbolSize: [47,28],
            //   // symbolOffset:[0,'50%'],
            //   symbolKeepAspect: true, // 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比。
            //   data: [{ type: "max", name: "最大值" }],
            //   label:{
            //     offset:[0,0],
            //     color:'#fff',
            //     fontSize:16,
            //     fontWeight:'700'
            //   }
            // },
            lineStyle: {
              width: 3,
              color: {
                colorStops:this.type==1? [
                  {
                    offset: 0,
                    color: "rgba(116, 255, 185,.1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(116, 255, 185,1)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(116, 255, 185,.1)", // 100% 处的颜色
                  },
                ]:[
                  {
                    offset: 0,
                    color: "rgba(116, 232, 255,.1)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(116, 232, 255,1)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(116, 232, 255,.1)", // 100% 处的颜色
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                color: this.type==1?"#74ffb9":"#74E8FF",
              },
            },
            areaStyle: {
              color:this.type==1? new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(116, 255, 185,.5)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 255, 185,0)",
                },
              ]):new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(116, 232, 255,.5)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 232, 255,0)",
                },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    }
  },
};
</script>

<style lang="less">
.trend-line {
  width: 100%;
  height: calc(100% - 30px);
  h3 {
    font-size: 22px;
    color: #ffffff;
    letter-spacing: 0;
    font-weight: 700;
    text-align: left;
  }
  .echartsbox {
    width: 100%;
    height: 100%;
  }
}
</style>